:root {
	--primary-color: #185ee0;
	--secondary-color: #e6eef9;
}

.tabs_container {
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #eee;
}

.tabs {
	display: flex;
	flex-direction: row;
	position: relative;
	background-color: white;
	box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);
	padding: 1.2rem;
	border-radius: 10rem;
}

.tabs * {
	z-index: 2;
}

.tab {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 5rem;
	width: 18rem;
	font-weight: 500;
	border-radius: 10rem;
	cursor: pointer;
	transition: color 0.15s ease-in;
	box-sizing: border-box;
	background-color: white;
}

.tab_input {
	display: none;
}

.tab_text {
	font-size: 1.9rem;
}

.tab_input:checked+label {
	color: var(--primary-color);
	background-color: var(--secondary-color);
}

.tab_input:checked+label .tab_text {
	font-size: 2.4rem;
}

.tab_glider {
	position: absolute;
	display: flex;
	height: 5rem;
	width: 18rem;
	background-color: var(--secondary-color);
	z-index: 1;
	border-radius: 10rem;
	transition: 0.25s ease-out;
}

.tab_badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-left: 1rem;
	border-radius: 50%;
	color: white;
	background-color: var(--primary-color);
	transition: 0.15s ease-in;
}

@media (max-width: 700px) {
	.tabs {
		transform: scale(0.6);
	}
}
